<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>完善用户资料</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="../footBallAdmin/lib/layui/css/layui.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/requestUrl.js"></script>
    <style>
        .mask .popup ul li {
            margin: 0 auto;
        }

        .mask .popup p {
            color: #999;
            line-height: 22px;
            margin-top: 3%;
            border-bottom: 1px solid #ccc;
            padding-bottom: 2%
        }

        input[type=file] {
            display: inline-block;
        }

        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0 10px 10px 0;
        }

        .user_center a:hover {
            color: #fff !important;
        }

        .showOrFalse {
            display: none !important;
        }
    </style>
</head>

<body>
    <!-- 头部导航 -->
    <div class="head">
        <div style="background: #006633">
            <div class="container">
                <div style="line-height: 30px;color:#fff;position: absolute;font-size:12px;">山东省足球运动协会欢迎您！</div>
                <div class="do">
                    <div class="does1" style="display: block;">
                        <a href="http://newtest.sdfa.org.cn/footballAssociation/zuxie/login.html"><span>登录</span></a>
                        |
                        <a href="http://newtest.sdfa.org.cn/footballAssociation/zuxie/register.html"><span>注册</span></a>
                    </div>
                    <div class="does2" style="display:none">
                        <span>欢迎<span id="telphone" style="margin:0"></span></span>
                        |
                        <span><a href="http://newtest.sdfa.org.cn/footballAssociation/zuxie/personal.html"
                                id="nickname">个人中心</a></span>
                        |
                        <span class="logout" style="cursor: pointer;">退出</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="head-choose">
            <div class="container">
                <img src="http://newtest.sdfa.org.cn/webfile//public/headicon.png"
                    style="position: absolute;top: 15px;">
                <a href="http://newtest.sdfa.org.cn/">
                    <div class="headtext">
                        <div class="headtext1">山东省足球运动协会</div>
                        <div class="headtext2">SHANDONG FOOTBALL ASSOCIATION</div>
                    </div>
                </a>
                <div style="display:inline-block;margin-left:302px">
                    <div class="choosea">
                        <a href="http://newtest.sdfa.org.cn/index.html?id=67">
                            <div>首页</div>
                        </a>
                        <div class="choosea-2">
                        </div>
                    </div>
                    <div class="choosea">
                        <a href="http://newtest.sdfa.org.cn/notice.html?id=68">
                            <div>通知公告</div>
                        </a>
                        <div class="choosea-2">
                            <a href="http://newtest.sdfa.org.cn/notice.html?id=68&amp;item=1">
                                <div>公告规程</div>
                            </a>
                            <a href="http://newtest.sdfa.org.cn/notice.html?id=68&amp;item=2">
                                <div>政策法规</div>
                            </a>
                        </div>
                    </div>
                    <div class="choosea">
                        <a href="javascript:void(0);">
                            <div>足球专区</div>
                        </a>
                        <div class="choosea-2">
                            <a href="http://newtest.sdfa.org.cn/soccernotice.html?id=70">
                                <div>女足专区</div>
                            </a>
                            <a href="http://newtest.sdfa.org.cn/prefecture.html?id=71&item=2&child=1">
                                <div>青少年足球</div>
                            </a>
                            <a href="http://newtest.sdfa.org.cn/soccernotice.html?id=72">
                                <div>社会足球</div>
                            </a>
                        </div>
                    </div>
                    <div class="choosea">
                        <a href="http://newtest.sdfa.org.cn/otherplace.html?id=87">
                            <div>各地足协</div>
                        </a>
                        <div class="choosea-2">
                        </div>
                    </div>
                    <div class="choosea">
                        <a href="http://newtest.sdfa.org.cn/shopping/index.htm" target="_blank">
                            <div>商城</div>
                        </a>
                        <div class="choosea-2" target="_blank">
                        </div>
                    </div>
                    <div class="choosea">
                        <a href="http://newtest.sdfa.org.cn/aboutus.html?id=77">
                            <div>关于我们</div>
                        </a>
                        <div class="choosea-2">
                        </div>
                    </div>
                </div>
                <form action="result.html" method="post">
                    <div class="input-group">
                        <input type="text" name="word" value="" autocomplete="off" class="form-control"
                            placeholder="请输入您要搜索的内容">
                        <span class="glyphicon glyphicon-search" onclick="$('.head form').submit()"></span>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <div class="center">
        <div class="user_center">
            <a href="http://newtest.sdfa.org.cn/footballAssociation/zuxie/personal.html"><span
                    style="font-size: 14px;">返回个人中心</span></a>

        </div>
        <div class="person">
            <h2>个人资料</h2>
            <div class="data">
                <ul>
                    <li>
                        <span>用户昵称</span>
                        <input type="text" value="" class="nickname" placeholder="请输入用户名称">
                    </li>
                    <!-- <li>
                    <span>密码</span>
                    <input type="password" value="" class="password" placeholder="设置6至20位登录密码">
                </li>
                <li>
                    <span>确认密码</span>
                    <input type="password" value="" class="again_password" placeholder="请再次输入登录密码">
                </li> -->
                    <li>
                        <span>真实姓名</span>
                        <input type="text" value="" class="name" placeholder="请输入您的真实姓名">
                    </li>
                    <li>
                        <span>性别</span>
                        <select name="" id="sex">
                            <option value="">请选择</option>
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </li>
                    <li>
                        <span>出生日期</span>
                        <input type="text" value="" id="birthday" placeholder="请选择您的出生日期">
                    </li>
                    <li id="shenfen" style="display: none;">
                        <span>身份</span>
                        <select name="" id="identity"
                            onchange="showChooseTeam(this.options[this.options.selectedIndex].value)">
                            <option value="">请选择</option>
                            <option value="1">教练员</option>
                            <option value="2">裁判员</option>
                            <option value="3">球员</option>
                            <option value="9">其他</option>
                        </select>
                    </li>
                    <li id="teamLi" style="display: none">
                        <span>球队</span>
                        <select name="" id="teamId">
                            <option value="">请选择</option>
                        </select>
                    </li>
                    <li>
                        <span>证件类型</span>
                        <select name="" id="select">
                            <option value="">请选择</option>
                            <option value="1">居民身份证</option>
                            <option value="2">护照</option>
                            <option value="3">户口本</option>
                        </select>
                    </li>
                    <li>
                        <span>证件号码</span>
                        <input type="text" value="" class="number" placeholder="请输入您的证件号码" maxlength="18">
                    </li>
                    <li>
                        <span>通信地址</span>
                        <input type="text" value="" class="address" placeholder="请输入您的通信地址">
                    </li>
                    <li id="">
                        <span>城市</span>
                        <select name="" id="s_province">
                            <option value="">请选择</option>
                        </select>
                    </li>
                    <li id="">
                        <span>地区</span>
                        <select name="" id="s_city">
                            <option value="">请选择</option>
                        </select>
                    </li>
                    <div style="cursor: pointer;display: block;margin: 0 auto;" class="save">提交</div>
                </ul>
                <div class="user_img">

                    <div class="layui-upload">
                        <div class="layui-upload-list" style="">
                            <img src="img/default.png" class="layui-upload-img" id="demo1">
                            <p id="demoText"></p>
                        </div>
                        <button style="background: #169bd5;" type="button" class="layui-btn" id="test1">上传头像</button>
                    </div>


                    <!-- <div class="imgUrl">
                <img id="imgUrl" src="img/default.png" alt="">
            </div> -->
                    <!-- <form action='' method='post' enctype="multipart/form-data" id='form1'>
                <input type="file" id="path" name="path">
                <button type='button' class='but' id="but">上传</button>
            </form> -->
                </div>
            </div>
        </div>
    </div>
    <div class="mask">
        <div class="popup">
            <div class="icon">
                <img src="img/success.png" alt="">
            </div>
            <h1>信息提交成功！</h1>
            <p class="showOrFalse">成为认证会员可以全站无限量观看视频下载资料，是否立即认证？</p>
            <ul class="showOrFalse">
                <li>
                    <a href="renzheng.html">立即认证</a>
                </li>
            </ul>
            <ul class="showOrTrue">
                <li>
                    <a href="personal.html">返回个人中心</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer" style="min-width: 100%;">
        <div>
            版权所有：山东省足球运动协会官方网站
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            ICP经营许可证：鲁ICP备15020327号
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            山东乐体网络科技有限公司
        </div>
    </div>
    <script src="js/layer/layer.js"></script>
    <script src="./js/area.js"></script>
    <script src="../footBallAdmin/lib/layui/layui.js"></script>


    <!-- <script src="js/requestUrl.js"></script> -->
    <script>
        _init_area();
        // 全局缓存global_nickName
        var global_nickName = sessionStorage.nickName;
        var global_userId = sessionStorage.userId;
        if (global_userId) {
            $('.do .does1').css('display', 'none')
            $('.do .does2').css('display', 'block')
        } else if (global_nickName == undefined || global_nickName == "") {
            $('.do .does1').css('display', 'block')
            $('.do .does2').css('display', 'none')
        }
        var global_tel = sessionStorage.tel;
        $("#telphone").text(global_tel)
        //退出
        $('.logout').click(function () {
            myAjax('/user/logout', {},
                function (data) {
                    console.log(data)
                    if (data.msg == 0) {
                        sessionStorage.clear()
                        window.location.href = "http://newtest.sdfa.org.cn/index.html"
                    }
                },
                function (err) {
                    console.log(err)
                })
        });

        // 请求地址
        function getRequestPrefix() {
            // 获取网络协议
            // 获取主机名+端口号
            // return urlPrefix = 'http://192.168.0.160:8083/footballAssociation';
            var domainPort = window.location.host;
            // 获取发布项目的名称
            // 获取路径
            var url = window.location.pathname;
            var webApp = url.split('/')[1];
            // http://127.0.0.1/demo
            var urlPrefix = "http://" + domainPort + "/" + webApp;
            return urlPrefix;
        }

        var requestUrl = getRequestPrefix();

        // // 获取到上个页面传过来的userId
        // var str = window.location.href
        // var num = str.indexOf("?")
        // var arr = str.substr(num + 1).split("&");
        // var obj = {};
        // for(var i = 0;i < arr.length;i++){
        // 	let item = arr[i].split("=");
        // 	obj[item[0]] = item[1];
        // }

        var userId = global_userId
        // var userId=20
        // 上传头像
        //自定义userId
        // userId = 5

        var imgUrl;

        layui.use(['upload', 'laydate'], function () {
            var upload = layui.upload,
                laydate = layui.laydate;
            var laydate1 = laydate.render({
                elem: "#birthday",
                type: "date"
            })

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1',
                url: requestUrl + '/user/uploadImg',
                before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                },
                done: function (res) {
                    console.log(res)
                    imgUrl = res.url
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    //上传成功
                },
                error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html(
                        '<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'
                    );
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        })
        $(function () {

            $.ajax({
                url: requestUrl + '/admin/player/getTeamList',
                type: 'POST',
                async: false,
                success: function (data) {
                    console.log(data, "data")
                    if (data.msg == '0') {
                        for (var i = 0; i < data.teamList.length; i++) {
                            $("#teamId").append("<option value='" + data.teamList[i].id + "'>" +
                                data.teamList[i].name + "</option>")
                        }
                    }
                }
            })
            $.ajax({
                url: requestUrl + '/user/findUseByUserId',
                type: 'POST',
                async: false,
                data: {
                    userId: userId
                },
                success: function (data) {
                    console.log(data, "data")
                    if (data.user.isVip !== "1") {
                        $(".showOrFalse").css("display", "block");
                        $(".showOrTrue").css("display", "none");
                    }
                    if (data.msg == '0') {
                        $(".nickname").val(data.user.nickName);
                        $(".name").val(data.user.name);
                        $("#sex").val(data.user.sex);
                        $("#identity").val(data.user.identity);
                        $("#birthday").val(data.user.birthDay);
                        $("#select").val(data.user.documentType);
                        $(".number").val(data.user.documentNumber);
                        $(".address").val(data.user.address);
                        $("#imgUrl").attr("src", data.user.headPortraitUrl);
                        if (data.user.personalOrGroup == 2) {
                            $("#shenfen").css("display", "none")
                        } else {
                            $("#shenfen").css("display", "flex")
                        }
                        if (data.user.headPortraitUrl) {
                            $("#demo1").attr("src", data.user.headPortraitUrl);
                            imgUrl = data.user.headPortraitUrl;
                        }

                        if (data.user.identity == '3') {
                            $("#teamLi").css('display', 'flex');
                            $("#teamId").val(data.user.teamId);
                        }
                        if (data.user.city) {
                            $("#s_province").val(data.user.city);
                            change(1)
                        }
                        if (data.user.area) {
                            $("#s_city").val(data.user.area);
                        }

                    }
                }
            })


            $('#but').click(function () {
                data = new FormData($('#form1')[0]);
                $.ajax({
                    url: requestUrl + '/user/uploadImg',
                    type: 'POST',
                    data: data,
                    dataType: 'JSON',
                    cache: false,
                    processData: false, //不处理发送的数据，因为data值是FormData对象，不需要对数据做处理
                    contentType: false, //不设置Content-type请求头
                    success: function (data) {
                        console.log(data)
                        if (data.msg == 0) {
                            imgUrl = data.url
                            $("#imgUrl").attr("src", imgUrl);
                        } else if (data.msg != 0) {
                            layer.alert(data.msg, {
                                title: '提示'
                            })
                        }
                    },
                    error: function (data) {
                        console.log(data)
                    }
                })
            })
            $('#buts').click(function () {
                data = new FormData($('#form2')[0]);
                $.ajax({
                    url: requestUrl + '/user/uploadImgs',
                    type: 'POST',
                    data: data,
                    dataType: 'JSON',
                    cache: false,
                    processData: false, //不处理发送的数据，因为data值是FormData对象，不需要对数据做处理
                    contentType: false, //不设置Content-type请求头
                    success: function (data) {
                        console.log(data)
                        if (data.msg == 0) {
                            imgUrl = data.url
                            $("#businessLicenseImg").attr("src", imgUrl);
                        } else if (data.msg != 0) {
                            layer.alert(data.msg, {
                                title: '提示'
                            })
                        }
                    },
                    error: function (data) {
                        console.log(data)
                    }
                })
            })
        })
        // 点击提交信息
        $('.save').click(function (event) {
            var sex = $("#sex").val(); //性别
            var nickname = $(".nickname").val(); //昵称
            var name = $(".name").val(); //真实名字
            var birthDay = $('#birthday').val(); //生日
            var itemText = $('#select').val(); //证件类型
            var number = $(".number").val(); //证件号码
            var regIdCard = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/
            var address = $(".address").val(); //通讯地址
            var user_img = $('#demo1').attr('src'); //头像
            var teamId = $("#teamId").val(); //球队id
            var city = $("#s_province").val(); //市
            var area = $("#s_city").val(); //区
            if (nickname == '') {
                layer.alert('请输入用户名称', {
                    title: '提示'
                })
                return
            }
            if (name == '') {
                layer.alert('请输入您的真实姓名', {
                    title: '提示'
                })
                return
            }
            if (birthDay == '') {
                layer.alert('请输入您的出生日期', {
                    title: '提示'
                })
                return
            }
            if (sex == '' || sex == null) {
                layer.alert('请选择您的性别', {
                    title: '提示'
                })
                return
            }
            if ($("#identity").val() == '' || $("#identity").val() == null) {
                layer.alert('请选择您的身份', {
                    title: '提示'
                })
                return
            }
            if ($("#identity").val() == "3" && teamId == "") {
                layer.alert('请选择您的球队', {
                    title: '提示'
                })
                return
            }
            if (itemText == '' || itemText == 0 || itemText == '请选择') {
                layer.alert('请选择您的证件类型', {
                    title: '提示'
                })
                return
            }
            if (number == '') {
                layer.alert('请输入您的证件号码', {
                    title: '提示'
                })
                return
            } else if (!regIdCard.test(number)) {
                layer.alert('证件号格式不正确', {
                    title: '提示'
                })
                return
            }
            if (city == "地级市") {
                layer.alert('请选择城市', {
                    title: '提示'
                })
                return
            }
            if (area == "地区") {
                layer.alert('请选择地区', {
                    title: '提示'
                })
                return
            }
            // if (($("#guardian").css("display") == "block") && ($("#select").val() == "1")) {
            //     if ($(".guardianName").val() === '') {
            //         layer.alert('请输入法定监护人姓名', {
            //             title: '提示'
            //         })
            //         return
            //     }
            //     if ($(".guardianTel").val() === '') {
            //         layer.alert('请输入法定监护人手机号', {
            //             title: '提示'
            //         })
            //         return
            //     }
            // }
            if (address == '') {
                layer.alert('请输入您的通讯地址', {
                    title: '提示'
                })
                return
            }
            if (user_img === 'img/default.png') {
                layer.alert('请上传头像', {
                    title: '提示'
                })
                return
            }
            myAjax('/user/perfectingInformation', {
                    nickName: nickname, //昵称
                    name: name, //真实名字
                    sex: sex,
                    birthDay: birthDay,
                    documentType: itemText, //证件类型
                    documentNumber: number, //证件号码
                    address: address, //通讯地址
                    headPortraitUrl: imgUrl, //头像地址
                    userId: userId, //session中的用户id
                    identity: $("#identity").val(),
                    teamId: teamId,
                    city: city,
                    area: area
                },

                function (data) {
                    if (data.msg == "0") {
                        sessionStorage.nickName = data.nickName
                        $('.mask').fadeIn(300)
                    } else {
                        layer.alert(data.msg, {
                            title: '提示'
                        })
                    }
                }

                ,

                function (err) {
                    console.log(err)
                }
            )
        });

        function showChooseTeam(value) {
            console.log(value)
            if (value == "3") {
                $("#teamLi").css('display', 'flex');
            } else {
                $("#teamLi").css('display', 'none');
                $("#teamId").val("")
            }
        }

        // /**
        //  * 根据身份证号计算年龄
        //  * @param UUserCard
        //  * @param num
        //  * @returns {string|string|*|number}
        //  * @constructor
        //  */
        // function IdCard(UUserCard) {
        //     if ($("#select").val() == "1") {
        //         //获取年龄
        //         var myDate = new Date();
        //         var month = myDate.getMonth() + 1;
        //         var day = myDate.getDate();
        //         var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
        //         if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) == month && UUserCard.substring(12,
        //             14) <=
        //             day) {
        //             age++;
        //         }
        //         console.log(age)
        //         if (age < 18) {
        //             $("#guardian").attr("style", "block");
        //         }
        //     }
        // }
    </script>
</body>

</html>